<template>
  <div id="login">
    <div style="height: 120px"></div>
    <div class="loginForm">
      <el-form ref="form" label-position="center" :rules="rules" :model="form">
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            round
            style="width: 100%"
            @click="login('form')"
            >登录</el-button
          >
          <el-button type="text" class="register" @click="toRegister"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      account: "",
      password: "",
      messageRule: {
        center: true,
        duration: 1500,
      },
    };
  },
  methods: {
    //注册
    toRegister() {
      this.$router.push("./register");
    },
    //登录
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.username !== "admin") {
            this.axios
              .post("/api/login", {
                username: this.form.username,
                password: this.form.password,
              })
              .then((res) => {
                //登录成功
                if (res.data.code === 200) {
                  console.log(res);
                  this.$message({
                    ...this.messageRule,
                    message: res.data.message,
                    type: "success",
                  });
                  this.resetSetItem("id", res.data.id);
                  this.resetSetItem("username", res.data.username);
                  this.$router.push("/");
                } else {
                  // 登录失败
                  this.$message({
                    ...this.messageRule,
                    message: res.data.message,
                    type: "error",
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.axios
              .post("/api/admin/login", {
                ...this.form,
              })
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message({
                    type: "success",
                    message: res.data.message,
                  });
                  this.resetSetItem("id", res.data.id);
                  this.resetSetItem("username", res.data.username);
                  this.$router.push("/admin/userAdmin");
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        }
      });
    },
  },
};
</script>
<style scoped>
#login{
  height: 100%;
  background: url("../assets/image/true.jpg") no-repeat;
  background-size: 100% 98%;
}
.loginForm {
  width: 400px;
  /*padding-top: 120px;*/
  margin: 0 auto;
  padding: 20px 40px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: rgba(22, 52, 80, 0.14) 5px 5px;
}
.register {
  font-size: 14px;
  line-height: 22px;
  color: #1ab2ff;
  cursor: pointer;
  text-align: center;
  text-indent: 8px;
  margin: 0 auto;
}
</style>
